<template>
    <div class="list">
        <div class="header">
            <div class="headerBox">
                <div class="icon">
                    <el-icon :size="25">
                        <Avatar style="size: 30px;" />
                    </el-icon>
                    <span>智慧物业管理系统</span>
                </div>
                <span id="out" @click="sign">退出系统</span>
            </div>
            <div class="bodyBox">
                <div key="v.id" v-for="v in tableData" class="bodyOne" @click="go">
                    <div class="oneHeader"></div>
                    <p id="quarters">{{v.cellName}}</p>
                    <p id="address">{{v.region}}</p>
                    <div class="operation">
                        <p id="operation1">管理</p>
                        <p id="operation1">编辑</p>
                        <p id="operation2">删除</p>
                    </div>
                </div>
                <div class="bodyTwo" @click="gone">
                    <div>
                        <p>+</p>
                        <p>新建小区</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>


<script setup lang="ts">
import { ref, onMounted } from "vue";
import router from "../../router/index";
import http from "../../utils/http";
import { ElMessage, ElMessageBox } from 'element-plus'

let tableData = ref([]);

let page = ref(1);
let count = ref(5);
// import { ref } from "vue";
let sign = () => {
    ElMessageBox.confirm(
    '确定退出系统吗?',
    '退出系统',
    {
      type: 'warning',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    }).then(() => {
      ElMessage({
        type: 'success',
        message: '退出成功',
      })
    router.replace('/')
    })
}
let go = () => {
    // console.log(2);
    http({
        url: '/basicInformation/list',
        method: 'get',
        params: {
            page: 1,
            limit: 10
        }
    }).then((res) => {
        router.replace("/home/workPlace")
    })
}
let gone = () => {
    // console.log(1);
    router.replace("/home/cellInformation")
    http({
        url: '/basicInformation/add',
        method: 'post'
    }).then((res) => {
        
    })
}

// 渲染函数
let getData = () => {
  http({
    url: "/basicInformation/list",
    params: {
      page: page.value,
      limit: count.value,
    },
  }).then(({data}) => {
    console.log(data);
    if (data.code == 0) {
      tableData.value=data.data.list;
    }
    console.log(tableData.value);
    
  });
};
//初始化渲染
onMounted(() => {
  console.log("挂载后");
  getData()
});
</script>


<style lang="less" scoped>
*,
.list {
    margin: 0;
    padding: 0;
}

.header {
    height: 50px;
    background-color: #ffffff;
}

.headerBox {
    width: 860px;
    display: flex;
    justify-content: space-between;
    line-height: 50px;
    margin: 0 250px;

    .icon {
        display: flex;
        align-items: center;
    }
}

.el-icon {
    margin-right: 5px;
    border-radius: 50%;
}

#out {
    font-size: 10px;
}

.bodyBox {
    width: 930px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-left: 250px;
    margin-top: 10px;

    .bodyOne {
        width: 218px;
        height: 230px;
        border: 1px solid rgb(197, 196, 196);
        background-color: #ffffff;
        cursor: pointer;
        margin: 8px 6px;

        .oneHeader {
            height: 115px;
            background-color: #f1f5fb;
        }

        #quarters {
            font-size: 15px;
            margin: 12px 0 12px 15px;
        }

        #address {
            font-size: 10px;
            margin: 0 0 12px 15px;
            color: rgb(167, 161, 161);
        }

        .operation {
            height: 40px;
            display: flex;
            // line-height: 40px;
            border-top: 1px solid #eee;
            font-size: 10px;

            #operation1 {
                width: 72px;
                text-align: center;
                color: #1890ff;
                height: 25px;
                border-right: 1px solid #eee;
                line-height: 25px;
                margin-top: 10px;
            }

            #operation2 {
                width: 72px;
                text-align: center;
                color: #f46377;
                height: 25px;
                line-height: 25px;
                margin-top: 10px;
            }
        }
    }

    .bodyTwo {
        width: 218px;
        height: 230px;
        border: 1px solid #eee;
        background-color: #ffffff;
        margin: 8px 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: rgb(204, 196, 196);
        cursor: pointer;
        font-size: 10px;
    }

    .bodyTwo:hover {
        border: 1px dashed #1890ff;
        color: #1890ff;
    }
}
</style>